<template>
	<view class="template-1v1">
		<view v-for="(item,id) in playerList" :key="item.streamID" v-if="item.src && (item.hasVideo || item.hasAudio)" :class="'view-container player-container ' +(item.isVisible?'':'none')">
			<live-player class="player" 
			:id="item.streamID" 
			:src="item.src" 
			mode="RTC" 
			autoplay
			orientation="vertical" 
			:object-fit="item.object-fit" 
			:background-mute="item.enableBackgroundMute" 
			:min-cache="item.minCache"
			:max-cache="item.maxCache"
			@statechange="_playerStateChange"
			@fullscreenchange="_playerFullscreenChange"
			@netstatus="_playerNetStatus"
			@audiovolumenotify="_playerAudioVolumeNotify"></live-player>
		</view>
		<view :class="'view-container pusher-container '+(fullscreen? 'fullscreen':'')">
			<live-pusher class="pusher" 
			:url="pusher.url" 
			:mode="pusher.mode" 
			:enable-camera="pusher.enableCamera" 
			:enable-mic="pusher.enableMic" 
			:muted="!pusher.enableMic"
			:enable-agc="pusher.enableAgc" 
			:enable-ans="pusher.enableAns"
		 	:auto-focus="pusher.enableAutoFocus"
			:zoom="pusher.enableZoom" 
			:min-bitrate="pusher.minBitrate" 
			:max-bitrate="pusher.maxBitrate"
			:beauty="pusher.beautyLevel" 
			:whiteness="pusher.whitenessLevel"
			:orientation="pusher.videoOrientation" 
			:aspect="pusher.videoAspect"
			:device-position="pusher.frontCamera" 
			:remote-mirror="pusher.enableRemoteMirror"
			:local-mirror="pusher.localMirror" 
			:background-mute="pusher.enableBackgroundMute"
			:audio-quality="pusher.audioQuality" 
			:audio-volume-type="pusher.audioVolumeType"
			:audio-reverb-type="pusher.audioReverbType" 
			:waiting-image="pusher.waitingImage" 
			@statechange="_pusherStateChangeHandler"
			@netstatus="_pusherNetStatusHandler"
			@error="_pusherErrorHandler"
			@bgmstart="_pusherBGMStartHandler"
			@bgmprogress="_pusherBGMProgressHandler"
			@bgmcomplete="_pusherBGMCompleteHandler"
			 ></live-pusher>
			<view class="loading" v-if="playerList.length === 0">
				<view class="loading-img">
					<image src="../../static/img/im5.png" class="rotate-img"></image>
				</view>
				<view class="loading-text">等待接听中...</view>
			</view>
		</view>
		<view class="handle-btns">
			<!-- <view class="btn-normal" @click="_pusherAudioHandler">
				<image class="btn-image"
					:src="pusher.enableMic? 'https://qd-service-crm.oss-cn-hangzhou.aliyuncs.com/trtc/audio-true.png': 'https://qd-service-crm.oss-cn-hangzhou.aliyuncs.com/trtc/audio-false.png' ">
				</image>
			</view> -->
			<view class="btn-normal" @click="_pusherSwitchCamera">
				<image class="btn-image" src="../../static/img/im1.png"></image>
			</view>
			<!-- <view class="btn-normal" bindtap="_toggleVideo">
		        <image class="btn-image" src="{{pusher.enableCamera? './static/camera-true.png': './static/camera-false.png'}} "></image>
		      </view> -->
			<view class="btn-normal" @click="_setPlayerSoundMode">
				<image class="btn-image"
					:src="playerList[0].soundMode === 'ear' ? '../../static/img/im3.png': '../../static/img/im2.png'">
				</image>
			</view>
		</view>
		<view class="bottom-btns">
			<!-- <view class="btn-normal" data-key="beautyLevel" data-value="9|0" data-value-type="number"
				@click="_setPusherBeautyHandle">
				<image class="btn-image"
					:src="pusher.beautyLevel == 9 ? 'https://qd-service-crm.oss-cn-hangzhou.aliyuncs.com/trtc/beauty-true.png': 'https://qd-service-crm.oss-cn-hangzhou.aliyuncs.com/trtc/beauty-false.png'">
				</image>
			</view> -->
			<view class="btn-hangup" @click="_hangUp">
				<image class="btn-image" src="../../static/img/im4.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import TRTC from "../../static/IM-SDK/trtc-wx.js"
	export default {
		data() {
			return {
				 _rtcConfig: {
				    sdkAppID: 1600049908, // 必要参数 开通实时音视频服务创建应用后分配的 sdkAppID
				    userID: '', // 必要参数 用户 ID 可以由您的帐号系统指定
				    userSig: '', // 必要参数 身份签名，相当于登录密码的作用
				},
				pusher: null,
				playerList: [],
				fullscreen:true
			}
		},
		onLoad(options) {
			console.log('room onload', options)
			uni.setKeepScreenOn({
			    keepScreenOn: true,
			})
			this.TRTC = new TRTC(this)
			this.init(options)
			this.bindTRTCRoomEvent()
			this.enterRoom({ roomID: options.roomID })

		},
		methods: {
			/* 初始化 */
			init(options) {
				// pusher 初始化参数
			    const pusherConfig = {
			      beautyLevel: 9
			    }
			    const pusher = this.TRTC.createPusher(pusherConfig)
			    console.log(pusher.pusherAttributes, '000')
			    this._rtcConfig= {
			        userID: options.userID,
			        sdkAppID: options.sdkAppID,
			        userSig: options.userSig,
			      }
			    this.pusher= pusher.pusherAttributes
			},
			/* 进房 */
			enterRoom(options) {
			    const roomID = options.roomID;
			    this._rtcConfig.roomID=roomID
			    this.pusher=this.TRTC.enterRoom(this._rtcConfig),
				
			    this.TRTC.getPusherInstance().start()
				console.log("推流",this.pusher)
			},
			/* 退房 */
			exitRoom() {
			    const result = this.TRTC.exitRoom()
			    this.pusher = result.pusher
			    this.playerList= result.playerList
			},
			 /* 设置 pusher 属性 */
			setPusherAttributesHandler(options) {
				this.pusher=this.TRTC.setPusherAttributes(options)
			},
			/* 设置某个 player 属性 */
			setPlayerAttributesHandler(player, options) {
			    this.playerList= this.TRTC.setPlayerAttributes(player.streamID, options);
			},
			/* 事件监听 */
			bindTRTCRoomEvent() {
			    const TRTC_EVENT = this.TRTC.EVENT
			    // 初始化事件订阅
			    this.TRTC.on(TRTC_EVENT.LOCAL_JOIN, (event) => {
			      console.log('* room LOCAL_JOIN', event)
			      // // 进房成功，触发该事件后可以对本地视频和音频进行设置
			      this.setPusherAttributesHandler({ enableCamera: true })
			      this.setPusherAttributesHandler({ enableMic: true })
			    })
			    this.TRTC.on(TRTC_EVENT.LOCAL_LEAVE, (event) => {
			      console.log('* room LOCAL_LEAVE', event)
			    })
			    this.TRTC.on(TRTC_EVENT.ERROR, (event) => {
			      console.log('* room ERROR', event)
			    })
			    // 远端用户退出
			    this.TRTC.on(TRTC_EVENT.REMOTE_USER_LEAVE, (event) => {
				  this.playerList = event.data.playerList
			      console.log('* room REMOTE_USER_LEAVE', event)
			    })
			    // 远端用户推送视频
			    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_ADD, (event) => {
			      console.log('* room REMOTE_VIDEO_ADD',  event)
			      // 开始播放远端的视频流，默认是不播放的
				  this.fullscreen=false;
			      this.setPlayerAttributesHandler(event.data.player, { muteVideo: false })
			    })
			    // 远端用户取消推送视频
			    this.TRTC.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, (event) => {
			      console.log('* room REMOTE_VIDEO_REMOVE', event)
				  this.fullscreen=true;
			      this.setPlayerAttributesHandler(event.data.player, { muteVideo: true })
			    })
			    // 远端用户推送音频
			    this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_ADD, (event) => {
			      console.log('* room REMOTE_AUDIO_ADD', event)
			      this.setPlayerAttributesHandler(event.data.player, { muteAudio: false })
			    })
			    // 远端用户取消推送音频
			    this.TRTC.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, (event) => {
			      console.log('* room REMOTE_AUDIO_REMOVE', event)
			      this.setPlayerAttributesHandler(event.data.player, { muteAudio: true })
			    })
			},
			 /* 是否订阅某一个player Audio */
			_mutePlayerAudio(event) {
			    const player = event.currentTarget.dataset.value
			    if (player.hasAudio && player.muteAudio) {
			      this.setPlayerAttributesHandler(player, { muteAudio: false })
			      return
			    }
			    if (player.hasAudio && !player.muteAudio) {
			      this.setPlayerAttributesHandler(player, { muteAudio: true })
			      return
			    }
			},
			 /* 订阅 / 取消订阅某一个player Video */
			_mutePlayerVideo(event) {
			    const player = event.currentTarget.dataset.value
			    if (player.hasVideo && player.muteVideo) {
			      this.setPlayerAttributesHandler(player, { muteVideo: false })
			      return
			    }
			    if (player.hasVideo && !player.muteVideo) {
			      this.setPlayerAttributesHandler(player, { muteVideo: true })
			      return
			    }
			},
			/* 挂断退出房间 */
			_hangUp() {
			    this.exitRoom()
			    uni.navigateBack({
			      delta: 1,
			    })
			},
			/* 设置美颜 */
			_setPusherBeautyHandle() {
			    const  beautyLevel = this.pusher.beautyLevel === 0 ? 9 : 0
			    this.setPusherAttributesHandler({ beautyLevel })
			},
			/* 发布 / 取消发布 Audio */
			_pusherAudioHandler() {
			    if (this.pusher.enableMic) {
			      this.setPusherAttributesHandler({ enableMic: false })
			    } else {
			      this.setPusherAttributesHandler({ enableMic: true })
			    }
			},
			/* 摄像头 */
			_pusherSwitchCamera() {
			    const  frontCamera = this.pusher.frontCamera === 'front' ? 'back' : 'front'
			    this.TRTC.getPusherInstance().switchCamera(frontCamera)
			},
			/* 声音 */
			_setPlayerSoundMode() {
			    if (this.playerList.length === 0) {
			      return
			    }
			    const player = this.TRTC.getPlayerList()
				console.log("声音",player)
			    const soundMode = player[0].soundMode === 'speaker' ? 'ear' : 'speaker'
			    this.setPlayerAttributesHandler(player[0], { soundMode })
			},
			/* 请保持跟 wxml 中绑定的事件名称一致 */
			_pusherStateChangeHandler(event) {
			    this.TRTC.pusherEventHandler(event)
			},
			_pusherNetStatusHandler(event) {
			    this.TRTC.pusherNetStatusHandler(event)
			},
			_pusherErrorHandler(event) {
			    this.TRTC.pusherErrorHandler(event)
			},
			_pusherBGMStartHandler(event) {
			    this.TRTC.pusherBGMStartHandler(event)
			},
			_pusherBGMProgressHandler(event) {
			    this.TRTC.pusherBGMProgressHandler(event)
			},
			_pusherBGMCompleteHandler(event) {
			    this.TRTC.pusherBGMCompleteHandler(event)
			},
			_pusherAudioVolumeNotify(event) {
			    this.TRTC.pusherAudioVolumeNotify(event)
			},
			_playerStateChange(event) {
			    this.TRTC.playerEventHandler(event)
			},
			_playerFullscreenChange(event) {
			    this.TRTC.playerFullscreenChange(event)
			},
			_playerNetStatus(event) {
			    //this.TRTC.playerNetStatus(event)
			},
			_playerAudioVolumeNotify(event) {
			   // this.TRTC.playerAudioVolumeNotify(event)
			},
		}
	}
</script>

<style>
/* 1v1 视频电话模式 */
page{
	/* background-color: #000000; */
}
.template-1v1{
  width: 100vw;
  height: 100vh;
  position: relative;
}
.template-1v1 .pusher-container{
  width: 240rpx;
  height: 320rpx;
  position: absolute;
  right: 20rpx;
  top: 160rpx;
  z-index: 2;
}
.pusher{
  height: 100%;
}
.player{
  height: 100%;
  width: 100%;
}
.template-1v1 .pusher-container.fullscreen{
  width: 100vw;
  height: 100vh;
  top: 0;
  right: 0;
}

.template-1v1 .loading {
  position: absolute;
  top: 40vh;
  left: 50vw;
  transform: translate(-50%, 0);
  width: 300rpx;
  height: 250rpx;
  border-radius: 12rpx;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}
.template-1v1 .loading-img {
  height: 200rpx;
  display:flex;
  justify-content: center;
  align-items: center;
  /* animation: rotate 2s linear infinite; */
}
.template-1v1 .rotate-img {
  width:160rpx;
  height: 160rpx;
}
.template-1v1 .loading-text {
  width: 100%;
  padding-top: 40rpx;
  text-align: center;
}
@keyframes rotate {
  0%{ transform: rotate(0deg);}
  50%{ transform: rotate(180deg);}
  100%{ transform: rotate(360deg);}
}
.template-1v1 .player-container:nth-child(1){
  width: 100vw;
  height: 100vh;
}

.template-1v1 .handle-btns {
  position: absolute;
  z-index: 3;
  bottom: 15vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.template-1v1 .bottom-btns {
  position: absolute;
  z-index: 3;
  bottom: 3vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* .template-1v1 image {
  width: 4vh;
  height: 4vh;
} */

.template-1v1 .btn-normal {
  width: 8vh;
  height: 8vh;
  box-sizing: border-box;
  display: flex;
  background: white;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.template-1v1 .btn-hangup .btn-image,
.template-1v1 .btn-normal .btn-image{
  width: 4vh;
  height: 4vh;
}
.template-1v1 .btn-hangup  {
  width: 8vh;
  height: 8vh;
  background: #f75c45;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

</style>
